<template>
  <div id="preview" v-loading="loading" element-loading-text="加载中...">
    <div class="preview-header">
      <div class="info">
        <h1 class="title">{{ blogInfo.title }}</h1>
        <!-- 博客概述 -->
        <p style="color: #909399">
          <span>
            <i class="iconfont icon-fenlei-copy"></i
            >{{ blogInfo.sort_name }}</span
          >
          <span> {{ blogInfo.summary }}</span>
        </p>
        <!-- 分类 -->
        <!-- 点赞评论 -->
        <p style="color: #a8abb2">
          <span>
            <i class="iconfont icon-icon1"></i>
            {{ blogInfo.likes }}
          </span>
          <span>
            <i class="iconfont icon-pinglun"></i>
            {{ blogInfo.comments }}
          </span>
          <span>
            <i class="iconfont icon-icon"></i>
            {{ blogInfo.look }}
          </span>
        </p>
        <!-- 日期-->
        <p style="color: #a8abb2">
          <span>
            <i class="iconfont icon-rili"></i>
            发表于: {{ dayjs(blogInfo.pub_date).format("YYYY-MM-DD") }}
          </span>
          |
          <span>
            <i class="iconfont icon-shijian"></i>
            更新于: {{ dayjs(blogInfo.up_date).format("YYYY-MM-DD") }}
          </span>
        </p>
        <p>
          预览主题：
          <el-select
            v-model="theme"
            placeholder="预览主题"
            style="width: 120px"
          >
            <el-option
              v-for="item in themeOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </p>
      </div>
      <wave></wave>
    </div>
    <div class="preview-container">
      <div class="article">
        <MdPreview
          id="my-preview"
          :editorId="id"
          :modelValue="text"
          :previewTheme="theme"
          style="width: 100%"
        />
        <div class="like">
          <div
            :class="blogInfo.islIKE ? 'active' : ''"
            class="like-icon"
            @click="like"
          >
            <i class="iconfont icon-dianzan"></i> {{ blogInfo.likes }}
          </div>
        </div>
        <!-- 评论-->
        <div class="comment">
          <h1>评论【共 {{ blogInfo.total }} 条评论】</h1>
          <Comment
            ref="commentRef"
            :add="addNewComment"
            :isExpand="true"
            :item="blogInfo"
          ></Comment>
        </div>
      </div>
      <div class="catalog">
        <Timer></Timer>
        <el-affix :offset="64">
          <el-card style="margin-top: 15px">
            <template #header>
              <div class="card-header">
                <span>目录</span>
              </div>
            </template>
            <div class="catalogMain">
              <MdCatalog
                :editorId="id"
                :scrollElement="scrollElement"
                style="color: #333"
                theme="dark"
              />
            </div>
          </el-card>
        </el-affix>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import Timer from "../../components/Timer/index.vue";
import { addBlogComment, getBlogDetail, likeArticle } from "@/api/index.js";
import { ref } from "vue";
import { MdCatalog, MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import Comment from "@/components/comment/index.vue";
import wave from "@/components/wave/index.vue";
import { message } from "ant-design-vue";
import { useStore } from "@/store/user.js";

const user = useStore();
const id = "preview-only";
const text = ref("");
const scrollElement = document.documentElement;
const route = useRoute();
const { id: blogId } = route.params;
const blogInfo = ref({});
let theme = ref("default");
let loading = ref(false);
const themeOptions = [
  "default",
  "github",
  "vuepress",
  "mk-cute",
  "smart-blue",
  "cyanosis",
];
//获取博客详情
const initDetail = async () => {
  loading.value = true;
  let res = await getBlogDetail({ id: blogId });
  if (res && res.status === 200) {
    blogInfo.value = res.data;
    text.value = res.data.content;
  }
  loading.value = false;
};
// 发布回复评论
const addNewComment = async (params) => {
  if (user.isLogin) {
    let res = await addBlogComment(params);
    if (res && res.status === 200) {
      message.success(res.data);
      await initDetail();
    } else message.error(res.data);
  } else {
    message.error("必须先登录才能评论哦");
  }
};
const like = async () => {
  if (blogInfo.value.islIKE) {
    blogInfo.value.islIKE = false;
    blogInfo.value.likes -= 1;
  } else {
    blogInfo.value.islIKE = true;
    blogInfo.value.likes += 1;
  }
  let res = await likeArticle({ blogId: blogInfo.value.id, user: 1 });
  if (res && res.status === 200) {
    message.success(res.data);
  }
};
initDetail();
</script>

<style lang="scss" scoped>
#preview {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;

  .preview-header {
    position: relative;
    width: 100%;
    height: 400px;
    background-image: url("https://ik.imagekit.io/mpjl8xreo/detailBg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    .info {
      width: 600px;
      height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .title {
        font-size: 28px;
        font-weight: 600;
        color: #fff;
      }

      p {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 14px;

        i {
          margin: 0 5px;
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #0009;
    }
  }

  .preview-container {
    width: 1200px;
    display: grid;
    grid-template-columns: minmax(1000px, 4fr) minmax(280px, 2fr);
    margin: 0 auto;
    gap: 15px;

    .article {
      width: 100%;
      height: 100%;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    @mixin center-div {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .like {
      width: 100%;
      @include center-div;
      color: #333333;
      font-size: 20px;
      margin: 10px 0;
      cursor: pointer;

      .like-icon {
        width: 90px;
        height: 90px;
        @include center-div;
        gap: 10px;
        border-radius: 50%;
      }

      i {
        font-size: 30px;
      }

      .active {
        color: #3967ff;
      }
    }

    .comment {
      padding: 15px 30px;
      color: #333333;

      h1 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 15px;
      }
    }

    .catalog {
      width: 100%;
      height: 100%;

      .catalogMain {
        max-height: 420px;
        overflow-y: scroll;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .preview-header .info {
    width: 100% !important;
  }
  .preview-container {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr !important;

    #my-preview {
      width: 100vw !important;
    }

    .catalog {
      display: none;
    }
  }
}
</style>
